<template>
	<div class="left-box">
		<div class="heade-wrapper" v-if="isShowSearch || isUseTopSlot ">
			<a-input-group compact v-if="isShowSearch">
				<slot name="topLeft"></slot>
				<a-input-search
					:class="{'heade-right-box' : isUseTopSlot}"
					:disabled="inputSearch.disabled"
					:placeholder="inputSearch.placeText"
					v-model.trim="searchValue"
					@search="onSearch"
					@blur="onBlur"
				/>
			</a-input-group>
		</div>
		<div
			:class="{'content-wrapper':isShowSearch || isUseTopSlot}"
		>
			<template v-if="isUseCheck">
				<scrollList
					ref="scrollList"
					:panel="scrollParams.panel"
					:command="scrollParams.command"
					:firstLoadSearch="firstLoadSearchInner"
					:showOtherProp="otherParams.showOther"
					:iconType="iconType"
					:otherProps="otherParams.otherLabels"
					@toCheckValue="onGetCheckedValue"
					:listDataHandler="listDataHandler"
				>
				</scrollList>
			</template>
			<template v-else>
				<slot name="content"></slot>
			</template>
		</div>
	</div>
</template>

<script>
import scrollList from './scrollList';
import addAccountDialog from './chooseList/addAccountDialog.vue';

export default {
	name: 'simpleLayout',
	components: {
		scrollList,
		addAccountDialog
	},
	inject: ['app'],
	props: {
		isUseCheck: { type: Boolean, default: true },
		isShowSearch: { type: Boolean, default: true },
		firstLoadSearch: { type: Boolean, default: false },
		isUseTopSlot: { type: Boolean, default: false },
		isDisabled: { type: Boolean, default: false },
		itemLabelField: { type: String, default: 'name' },
		/*搜索提示*/
		inputSearch: {
			type: Object,
			default: () => {
				return {
					placeText: '请搜索',
					disabled: false
				};
			}
		},
		/*列表的基本参数*/
		scrollParams: {
			type: Object,
			default: () => {
				return {
					panel: '',
					command: ''
				};
			}
		},
		/*列表的查询参数*/
		scrollArguments: {
			type: Object,
			default: () => {
			}
		},
		/*？？*/
		otherParams: {
			type: Object,
			default: () => {
				return {
					showOther: false,
					otherLabels: []
				};
			}
		},
		/*列表数据图标*/
		iconType: { type: String, default: '' },
		/*列表数据处理*/
		listDataHandler: {
			type: Function || null,
			default: null
		}
	},
	data() {
		return {
			searchValue: '',
			accountId: '',
			searchData: {},
			firstLoadSearchInner: this.firstLoadSearch
		};
	},
	computed: {
		orgSelect() {
			return this.app().orgSelect;
		}

	},
	methods: {
		onSearchData(data) {
			this.firstLoadSearchInner = true;
			this.$refs.scrollList.initProps();
			this.$refs.scrollList.search(data);
		},
		onChangeAccount(data) {
			this.$emit('toSwitchAccount', data);
			this.searchValue = '';
			if (!this.isUseCheck) {
				return;
			}
			this.accountId = data.id;
			this.searchData.accountId = data.id;
			this.onSearchData({
				...this.searchData,
				keyword: '',
				accountId: data.id
			});
		},
		onSearch(val) {
			let searchData = { keyword: val, ...this.searchData };
			searchData = { accountId: this.accountId, ...searchData };
			this.$emit('toSearch', val);
			if (!this.isUseCheck) {
				return;
			}
			this.onSearchData(searchData);
		},
		onUpdateAccountList() {
			this.$refs.scrollList.search(this.searchData);
		},
		onBlur(event) {
			let value = event.target.value;
			this.$emit('toBlur', value);
		}
	},
	mounted() {
		this.accountId = this.app().switchAfterUnit.id;
		this.searchData = {
			accountId: this.accountId,
			...this.scrollArguments,
			...this.searchData
		};
		if (this.isUseCheck) {
			this.onSearchData(this.searchData);
		}
	}
};
</script>
